<template>
  <scroller class="page">
    <text class="status">交易成功</text>
    <div class="address" v-if="info.address && info.name && info.mobile">
      <!-- <image></image> -->
      <div class="address-info">
        <text class="address-info-text-1">{{ info.address }}</text>
        <text class="address-info-text-2">{{ info.name }} {{ info.mobile }}</text>
      </div>
    </div>
    <div class="product">
      <text class="product-header">商品信息</text>
      <div v-if="info.cart && info.cart.length > 0">
        <div class="product-item-content" v-for="product in info.cart">
          <image class="product-item-img" resize="cover" :src="product.cover"></image>
          <div class="product-item-left">
            <text class="product-item-title" v-if="product.formatId">{{ product.title }}（{{ product.format }}）</text>
            <text class="product-item-title" v-else>{{ product.title }}</text>
            <!-- <text class="product-item-subtitle">{{ product.subtitle }}</text> -->
          </div>
          <div class="product-item-right">
            <text class="product-item-price" v-if="product.formatId">￥{{ product.fee | div100 }}</text>
            <text class="product-item-price" v-else>￥{{ product.price }}</text>
            <text class="product-item-count">x{{ product.count }}</text>
          </div>
        </div>
      </div>
      <div class="product-item-content" v-else>
        <image class="product-item-img" resize="cover" :src="info.cover"></image>
        <div class="product-item-left">
          <text class="product-item-title" v-if="info.formatId">{{ info.title }}（{{ info.formatTitle }}）</text>
          <text class="product-item-title" v-else>{{ info.title }}</text>
          <text class="product-item-subtitle">{{ info.subtitle }}</text>
        </div>
        <div class="product-item-right">
          <text class="product-item-price" v-if="info.formatId">￥{{ info.formatFee | div100 }}</text>
          <text class="product-item-price" v-else>￥{{ info.price }}</text>
          <text class="product-item-count">x{{ info.count }}</text>
        </div>
      </div>
      <div class="product-summary">
        <div class="info">
          <text class="info-text">小计：</text>
          <text class="info-text">￥000</text>
        </div>
        <div class="info">
          <text class="info-text">运费：</text>
          <text class="info-text">￥0.00</text>
        </div>
        <!-- <div class="info">
          <text class="info-text">优惠/折扣：</text>
          <text class="info-text">-￥0.00</text>
        </div> -->
        <div class="info">
          <text class="info-text">实付：</text>
          <text class="info-text">￥000</text>
        </div>
      </div>
    </div>
    <div class="order">
      <div class="info">
        <text class="info-text">订单编号：</text>
        <text class="info-text">XXXXXXX</text>
      </div>
      <div class="info">
        <text class="info-text">下单时间：</text>
        <text class="info-text">{{ info.addTime }}</text>
      </div>
      <div class="info">
        <text class="info-text">支付方式：</text>
        <text class="info-text">XXX</text>
      </div>
    </div>
    <Footer />
  </scroller>
</template>
<script>
import Footer from '@/components/Footer';
import utils from './utils/utils.js';
const modal = weex.requireModule('modal');
export default {
  name: 'App',
  components: {
    Footer
  },
  data() {
    return {
      orderId: '',
      info: {}
    }
  },
  mounted() {
    var event = weex.requireModule('event');
    event.initData(JSON.stringify({'title':'订单详情'}), json => {
      console.log("orderInfo json: " + json)
      var data = JSON.parse(json);
      this.orderId = data.orderId;
      this.init();
    })
  },
  methods: {
    init() {
      var url = '/yq/order/info';
      var params = {
        orderId: this.orderId
      };
      var success = res => {
        if (res.status == 200) {
          console.log(res.status);
          this.info = res.info;
        } else {
          modal.toast({
            message: '获取数据失败',
            duration: 1
          })
        }
      }
      var fail = res => {
        modal.toast({
          message: '获取数据失败',
          duration: 1
        })
      }
      utils.request(url, params, success, fail);
    }
  },
  filters: {
    div100(arg1) {
      var t1 = 0, r1;
      try { t1 = arg1.toString().split(".")[1].length; } catch (e) { }
      // with (Math) {
        r1 = Number(arg1.toString().replace(".", ""));
        return (r1 / 100) * Math.pow(10, -t1);
      // }
    }
  }
}
</script>
<style scoped>
text {
  font-size: 32px;
}

.page {
  padding-bottom: 150px;
}

.status {
  padding: 30px;
  border-bottom-width: 20px;
  border-bottom-style: solid;
  border-bottom-color: #f5f5f5;
  font-size: 36px;
  font-weight: bold;
}

.address {
  padding: 30px;
  border-bottom-width: 20px;
  border-bottom-style: solid;
  border-bottom-color: #f5f5f5;
  flex-direction: row;
  align-items: center;
}

.address-info {
  flex-direction: column;
}

.address-info-text-1,
.address-info-text-2 {
  font-size: 28px;
}

.address-info-text-1 {
  margin-bottom: 20px;
}

.product {
  border-bottom-width: 20px;
  border-bottom-style: solid;
  border-bottom-color: #f5f5f5;
}

.product-header {
  padding: 30px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #eee;
  font-size: 36px;
  font-weight: bold;
}

.product-item {
  padding: 30px;
  flex-direction: column;
}

.product-item-content {
  flex-direction: row;
  justify-content: space-between;
  padding: 30px 30px 0 30px;
  margin-bottom: 30px;
}

.product-item-img {
  width: 120px;
  height: 120px;
}

.product-item-left {
  width: 420px;
  padding: 0 30px;
}

.product-item-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
}

.product-item-subtitle {
  font-size: 24px;
  color: #888;
}

.product-item-right {
  width: 150px;
  align-items: flex-end;
}

.product-item-price {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
}

.product-item-count {
  font-size: 24px;
  color: #888;
}

.product-summary {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #ccc;
  padding: 30px;
}

.info {
  flex-direction: row;
  justify-content: space-between;
}

.info-text {
  font-size: 30px;
  color: #888;
  margin-bottom: 10px;
}

.order {
  padding: 30px;
}
</style>